<template>
  <el-dialog
    class="nodeDialog custom-dialog"
    v-model="dialogVisible"
    width="500"
    :show-close='false'
    modal-class="dialog-center"
  >
    <div class="custom-dialog-header">
      <div class="title-box">
          <div class="title">{{$t('message.text.label')}}</div>
      </div>
      <svg class="close-icon" @click="cancel">
          <use xlink:href="#keowledge-danchuangguanbi1"></use>
      </svg>
    </div>
    <div class="node-tag-box">
      <el-input
        v-model="tag"
        @keyup.native="add"
        :disabled="tagArr.length >= max"
        :placeholder="$t('message.placeholder.pleaseEnter')"
      >
      </el-input>
      <div class="tagList">
        <div
          class="tagItem"
          v-for="(item, index) in tagArr"
          :key="index"
          :style="{
            backgroundColor: tagColorList[index].background,
            color: tagColorList[index].color,
          }"
        >
          {{ item }}
          <div class="delBtn" @click="del(index)">
            <span class="xmind-iconfont iconshanchu"></span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{$t('message.buttons.cancal')}}</el-button>
        <el-button type="primary" @click="confirm">{{$t('message.buttons.submit')}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
import { tagColorList } from "./utils/constant";
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const dialogVisible = ref(false)
const tagArr = ref([])
const tag = ref('')
const activeNodes = ref([])
const max = ref(5) 

onMounted(()=>{
  proxy.$eventBus.$on("node_active", (...args) => {
    activeNodes.value = args[1];
    if (activeNodes.value.length > 0) {
      let firstNode = activeNodes.value[0];
      tagArr.value = firstNode.getData("tag") || [];
    } else {
      tagArr.value = [];
      tag.value = "";
    }
  });
  proxy.$eventBus.$on("showNodeTag", () => {
    proxy.$eventBus.$emit('startTextEdit');
    dialogVisible.value = true;
  });
})

function add() {
  tagArr.value.push(tag.value);
  tag.value = "";
}
function del(index) {
  tagArr.value.splice(index, 1);
}
function cancel() {
  dialogVisible.value = false;
  proxy.$eventBus.$emit('endTextEdit');
}
function confirm() {
  activeNodes.value.forEach((node) => {
    node.setTag(tagArr.value);
  });
  cancel();
}
</script>
<style lang="scss" scoped>
.nodeDialog {
  .node-tag-box{
    padding: 30px 20px;
  }
  .tagList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;

    .tagItem {
      position: relative;
      padding: 3px 5px;
      margin-right: 5px;
      margin-bottom: 5px;

      .delBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        visibility: hidden;
      }

      &:hover {
        .delBtn {
          visibility: visible;
        }
      }
    }
  }
}
</style>